<template>
  <view class="container">
    <uni-nav-bar
      :border="false"
      statusBar
      title="选择人员"
      left-icon="left"
      @clickLeft="onBack"
    >
    </uni-nav-bar>

    <FilterView ref="filterView">
      <template #search>
        <uni-search-bar
          radius="17"
          bgColor="#fff"
          cancelButton="none"
          placeholder="搜索姓名"
          v-model="queryData.userName"
          @confirm="onSearch"
          @clear="onSearch"
        ></uni-search-bar>
      </template>
      <template #form>
        <uni-forms
          ref="filterForm"
          v-model="queryData"
          label-position="top"
          label-width="150"
        >
          <uni-row :gutter="26">
            <uni-col :span="24">
              <uni-forms-item label="所在部门" name="deptId">
                <uni-data-picker
                  placeholder="请选择部门"
                  popup-title="请选择部门"
                  :localdata="
                    $util.processingTree(appStore.deptData, 'value', 'parentId')
                  "
                  v-model="queryData.deptId"
                />
              </uni-forms-item>
            </uni-col>
          </uni-row>
        </uni-forms>
      </template>
      <template #footer>
        <view class="filterBtn">
          <button class="btn r" type="primary" @click="onReset">重置</button>
          <button class="btn s" type="primary" @click="onSure('filterForm')">
            确定
          </button>
        </view>
      </template>
    </FilterView>

    <view class="box">
      <view class="infoBox">
        <view class="item">
          <text class="name">点击左侧图标勾选</text>
          <text class="val">{{ data.visitorName }}</text>
        </view>
      </view>

      <list-scroll-view
        :ref="'scrollView0'"
        :api="getUserList"
        :init="{
          ...(query.excludeUserIds
            ? { excludeUserIds: query.excludeUserIds }
            : {}),
        }"
        :refresherEnabled="enabled"
      >
        <template v-slot:list="{ data }">
          <uni-list>
            <uni-list-item
              v-for="(item, i) in data"
              :key="i"
              :title="item.nickName"
              :note="item.deptName"
              rightText=""
            >
              <template v-slot:header>
                <view
                  class="uni-inline-item"
                  style="margin-right: 10rpx"
                  @click="onClick(item)"
                >
                  <uni-icons
                    type="checkbox-filled"
                    size="30"
                    color="#409EFF"
                    v-if="
                      selData.findIndex((o) => o.userId == item.userId) > -1
                    "
                  ></uni-icons>
                  <uni-icons type="circle" size="30" v-else></uni-icons>
                </view>
              </template>
            </uni-list-item>
          </uni-list>
        </template>
      </list-scroll-view>
    </view>
    <view class="footer">
      <view class="divider divider-horizontal">
        <view class="text">勾选人员信息</view>
      </view>
      <view class="box">
        <view :class="{ hasVal: this.selData.length > 0 }"
          >已选择 {{ this.selData.length }} 人</view
        >
        <button class="btn" size="mini" type="primary" @click="onSubmit">
          确定
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserList, getDeptList } from '@/api/index';
import _ from 'lodash';
import useAppStore from '@/store/modules/app';
import FilterView from '@/components/FilterView/index.vue';
import ListScrollView from '@/components/ListScrollView/index.vue';
export default {
  components: {
    FilterView,
    ListScrollView,
  },
  data() {
    return {
      data: {},
      query: {},
      queryData: {},
      enabled: true,
      // api
      getUserList,
      // 勾选
      selData: [],
      // 带数据再次进入
      again: 0,
      // store
      appStore: useAppStore(),
    };
  },
  onLoad(query) {
    this.query = query;
    // 有数据时更新勾选
    if (query.userIds) {
      let r = query.userIds.split(',');
      r.map((item) => {
        this.selData.push({
          userId: item,
        });
      });
      this.again = 1;
    }
  },
  onShow() {
    this.$nextTick(() => {
      this.$refs[`scrollView0`].getData(true);
    });
  },
  methods: {
    // 初始数据
    initData() {
      getDeptList().then((res) => {
        this.deptData = res.data.map((item) => {
          return {
            text: item.deptName,
            label: item.deptName,
            value: item.deptId,
            parentId: item.parentId,
          };
        });
        this.appStore.updateDeptData(this.deptData);
      });
    },
    // 勾选
    onClick(e) {
      if (this.query.multiple == 1) {
        let i = this.selData.findIndex((item) => item.userId == e.userId);
        if (i > -1) {
          this.selData.splice(i, 1);
        } else {
          this.selData.push(e);
        }
      } else {
        this.selData = [e];
      }
    },
    // 搜索
    onSure(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          this.$refs[`scrollView0`].searchData(this.queryData);
          this.$refs.filterView.onClose();
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    onReset() {
      this.queryData = this.$options.data().queryData;
    },
    onSearch(e) {
      this.$refs[`scrollView0`].searchData(this.queryData);
    },
    // 提交
    onSubmit() {
      if (this.selData.length === 0) {
        uni.showToast({
          icon: 'none',
          title: `未选择人员`,
        });
        return;
      }
      // 再次编辑时的数据处理
      if (this.again === 1) {
        this.selData.map((item, i) => {
          let r = this.$refs[`scrollView0`].list.find(
            (l) => l.userId == item.userId
          );
          if (r) {
            this.selData[i] = r;
          }
        });
      }
      // 页面通讯，组件里使用时，因为是跳转页面，顾不能在deactivated里进行off移除
      this.$bus.emit('addUserData', this.selData);
      this.onBack();
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-image: url('http://1.71.136.228:8983/elephant_energy/static/image/v2/bg0.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: relative;
  :deep(.uni-searchbar) {
    padding: 0;
  }
  :deep(.uni-forms) {
    .uni-forms-item__label {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }
    .uni-easyinput__content {
      background: #f5f5f5 !important;
      .uni-easyinput__content-input {
        height: 33px;
      }
    }
    .uni-select {
      background: #f5f5f5;
    }
    .uni-date-x {
      background: #f5f5f5;
    }
    .uni-data-tree {
      background: #f5f5f5;
    }
  }
  .filterBtn {
    display: flex;
    align-items: center;
    .r {
      background: #6bb0ff;
      border-radius: 70rpx 0rpx 0rpx 70rpx;
    }
    .s {
      background: #5293ff;
      border-radius: 0rpx 70rpx 70rpx 0rpx;
    }
    .btn {
      width: 50%;
      font-size: 28rpx;
      color: #ffffff;
      margin: 0;
      &::after {
        border: none;
      }
    }
  }
  .box {
    margin: 0 36rpx 0;
    padding: 24rpx;
    background: #ffffff;
    border-radius: 20rpx;

    .infoBox {
      .item {
        font-size: 30rpx;
        font-weight: 500;
        padding: 22rpx 0;
        display: flex;
        justify-content: space-between;

        .name {
          color: #888888;
        }

        .val {
          width: 30%;
          color: #555555;
          text-align: right;
          word-break: break-all;
        }
      }
    }
  }
  .footer {
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom));
    bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
    .box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btn {
        margin: 0;
      }
      .hasVal {
        color: #409eff;
      }
    }
  }
}
</style>
